<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: '87' + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="记录排行" />
      <scroll-view scroll-y class="scroll-view-content">
        <template>
          <view class="event-records-page">
            <!-- 顶部特色记录 -->
            <view class="featured-record">
              <view class="record-card featured">
                <!-- 背景图片 -->
                <image
                  class="bg-image"
                  :src="imgUrl + 'recordRanking-bg-active@2x.png'"
                  mode="aspectFill"
                />

                <!-- 内容层 -->
                <view class="content-overlay">
                  <view class="record-type">公开男子</view>

                  <view class="record-main">
                    <image class="avatar" :src="featuredRecord.avatar" />
                    <view class="name">{{ featuredRecord.username }}</view>
                    <view class="record-info">
                      <view class="badge">MR</view>
                    </view>
                    <view class="record-score">
                      <view class="score">{{ featuredRecord.competition_time }}</view>
                    </view>
                  </view>
                  <view class="record-date-location">
                    <view class="record-date">{{ featuredRecord.start_time }}</view>
                    <view class="location">{{ featuredRecord.city }}</view>
                  </view>
                </view>
              </view>
            </view>

            <!-- 分组筛选 -->
            <view class="group-tabs">
              <view
                v-for="(group, idx) in groups"
                :key="group"
                :class="['tab', { active: idx === activeGroup }]"
                @tap="handleChage(idx)"
              >
                {{ group }}
              </view>
            </view>

            <!-- 记录列表 -->
            <view class="records-list">
              <view v-for="(record, idx) in filteredRecords" :key="idx" class="record-card">
                <!-- 背景图片 -->
                <image
                  class="bg-image"
                  :src="imgUrl + 'recordRanking-bg-normal@2x.png'"
                  mode="aspectFill"
                />

                <!-- 小标签 -->
                <view class="card-tab"></view>

                <!-- 内容层 -->
                <view class="content-overlay">
                  <view class="record-type">{{ record.group_name }}</view>
                  <view class="record-main">
                    <image class="avatar" :src="record.avatar" />
                    <view class="name">{{ record.username }}</view>
                    <view class="record-info">
                      <view class="badge">MR</view>
                    </view>
                    <view class="record-score">
                      <view class="score">{{ record.competition_time }}</view>
                    </view>
                  </view>
                  <view class="record-date-location">
                    <view class="record-date">{{ record.start_time }}</view>
                    <view class="location">{{ record.city }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </template>
      </scroll-view>
    </view>
  </scroll-view>
</template>

<script setup>
  import { ref } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { useRequest } from '@/api'
  const { API_RECORD_RECORD_POST } = useRequest()
  const appStore = useOutsideAppStore()
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const groups = ['男子组', '女子组', '混合组']
  const activeGroup = ref(0)

  const featuredRecord = ref({})

  const filteredRecords = ref([])
  const typeId = ref(1)
  const handleChage = (idx) => {
    activeGroup.value = idx
    typeId.value = idx + 1
    getRecord()
  }
  const getRecord = async () => {
    const res = await API_RECORD_RECORD_POST({
      page: 1,
      page_size: 999,
      iem_id: opId.value,
      type: typeId.value
    })
    if (res.code === 1) {
      filteredRecords.value = res.data.data
      featuredRecord.value = res.data.data[0]
    }
  }
  const opId = ref('')
  onLoad((options) => {
    opId.value = options.id
    getRecord()
  })
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
<style></style>
